<template>
	<Container>
		<view class="header">
			<view class="article" v-if="isArticleShow">
				<view
					v-for="(item, index) in assignment.optionArticles[current]"
					:key="index"
					:class="{  articleLight: chooses[index] === 'select' }"
					@tap="tap(item, index)"
					hover-class="touch"
					hover-stay-time="300"
				>
					<image
						class="img image"
						v-if="item.type === 'shape'"
						:style="{ filter: color[item.colorText] }"
						:src="'https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/question/shape/' + encodeURI(item.shapeText) + '.png'"
						mode="aspectFit"
					></image>
					<image class="img image" v-if="item.type === 'image'" :src="item.imageUrl" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="option">
			<image
				class="img image"
				v-if="option.type === 'shape'"
				:style="{ filter: color[option.colorText] }"
				:src="'https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/question/shape/' + encodeURI(option.shapeText) + '.png'"
				mode="aspectFit"
			></image>
			<image class="img image" v-if="option.type === 'image'" :src="option.imageUrl" mode="aspectFit"></image>
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { times } from '../../../common/mixins/assignmentTimes.js'
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	mixins: [mixins, times],
	components: { Question, Container },
	computed: {
		color() {
			return this.config.shapeColor
		},
		option() {
			return this.assignment.optionArticles[this.current].filter(item => {
				return item.isMatched
			})[0]
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 55vh
	width 720rpx
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	position relative
	margin 5vh 0
	.article
		animation outIn 0.4s
		display flex
		justify-content center
		align-content flex-start
		flex-wrap wrap
		height 55vh
		view
			width 25%
			height 20%
			display flex
			align-items center
			justify-content center
			transition all 0.3s
			position relative
			.image
				width 80%
				height 80%
.option
	width 15vh
	height 15vh
	border 8rpx solid #FF9A72
	box-sizing border-box
	border-radius 50rpx
	display flex
	align-items center
	justify-content center
	margin 4vh auto
	image
		width 80%
		height 80%
</style>
